<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.pointer {
				cursor: pointer;
			}
			
			.notAllowed {
				cursor: not-allowed;
			}
			
			body {
				background-image: url(img/bg1.gif);
				background-size: cover;
			}
			
			canvas {
				position: absolute;
				left: 100px;
				top: 60px;
			}
			
			#succece {
				display: none;
				position: absolute;
				left: 100px;
				top: 60px;
				width: 500px;
				height: 500px;
			}
			
			#succece>img {
				margin-left: 100px;
				margin-top: 140px;
			}
			
			#zier {
				width: 315px;
				height: 193px;
				position: absolute;
				left: 100px;
				top: 140px;
			}
			
			#zier>span {
				display: block;
				margin-top: 40px;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
			}
			
			#clickInit {
				width: 100px;
				height: 40px;
				margin: 30px auto;
				background-color: gold;
				border-radius: 20px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<audio src="music/黃順 - 琵琶语.mp3"  loop="loop" autoplay="autoplay"></audio>
		<audio id="shenli" src="music/五子棋_非盟的胜利.wav"></audio>
		<audio id="xiangxia" src="music/五子棋-向下.wav"></audio>
		<canvas id="mycanvas" width="" height=""></canvas>
		<div id="succece">
			<img src="img/游戏结束了.png" />
			<div id="zier">
				<span id="who">胜利了</span>
				<div id="clickInit" onclick="repeat()">
					重 来
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			canvas.width = 500;
			canvas.height = 500;
			var shenli = document.getElementById("shenli");
			var div = document.getElementById("succece");
			var who = document.getElementById("who");
			var xiangxia = document.getElementById("xiangxia");
			var isBai = true;
			var ctx = canvas.getContext('2d');
			var maps = [];

			drawQipan();
			init();
			drawQizi();

			function repeat() {
				div.style.display = "none";
				drawQipan();
				init();
				drawQizi();
			}

			function success(white, black) {
				if(white == 5) {
					//					console.log("白棋胜利");
					shenli.load();
					shenli.play();
					who.innerHTML = "白棋胜利";
					div.style.display = "block";

				} else if(black == 5) {
					shenli.load();
					shenli.play();
					//					console.log("黑棋胜利")
					who.innerHTML = "黑棋胜利";
					div.style.display = "block";
				}
			}

			function checkSuccess() {
				//横坐标
				var counthei = 0;
				var countbai = 0;
				for(var i = 0; i < 15; i++) {
					if(maps[a][i] == 1) {
						counthei = 0;
						countbai++;
						
						if (countbai>=5) {
							success(countbai, counthei);
							return true;
						}
					} else if(maps[a][i] == 2) {
						countbai = 0;
						counthei++;
						
						if (counthei>=5) {
							success(countbai, counthei);
							return true;
						}
					} 
					else if(maps[a][i] == 0) {
						countbai = 0;
						counthei = 0;
					}
				}
				
				//纵坐标
				var counthei = 0;
				var countbai = 0;
				for(var i = 0; i < 15; i++) {
					if(maps[i][b] == 1) {
						counthei = 0;
						countbai++;
						if (countbai>=5) {
							success(countbai, counthei);
							return true;
						}
					} else if(maps[i][b] == 2) {
						countbai = 0;
						counthei++;
						if (counthei>=5) {
							success(countbai, counthei);
							return true;
						}
					}
					else if(maps[a][i] == 0) {
						countbai = 0;
						counthei = 0;
					}
					//					else if(maps[a][i]==0){
					//						countbai=0;
					//						counthei=0;
					//					}
				}

				success(countbai, counthei);
				//斜下
				var counthei = 0;
				var countbai = 0;
				var vy = a - b < 0 ? 0 : a - b;
				var vx = b - a < 0 ? 0 : b - a;
				for(; vx < 15 && vy < 15; vx++, vy++) {
					if(maps[vy][vx] == 1) {
						counthei = 0;
						countbai++;
						if (countbai>=5) {
							success(countbai, counthei);
							return true;
						}
					} else if(maps[vy][vx] == 2) {
						countbai = 0;
						counthei++;
						if (counthei>=5) {
							success(countbai, counthei);
							return true;
						}
					}else if(maps[a][i] == 0) {
						countbai = 0;
						counthei = 0;
					}
				}
				success(countbai, counthei);
				//斜上
				var counthei = 0;
				var countbai = 0;
				var vx = a + b > 14 ? 14 : a + b;
				var vy = a + b > 14 ? (a + b) - 14 : 0;
				for(; vx > 0 && vy < 15; vx--, vy++) {
					if(maps[vy][vx] == 1) {
						counthei = 0;
						countbai++;
						if (countbai>=5) {
							success(countbai, counthei);
							return true;
						}
					} else if(maps[vy][vx] == 2) {
						countbai = 0;
						counthei++;
						if (counthei>=5) {
							success(countbai, counthei);
							return true;
						}
					}else if(maps[a][i] == 0) {
						countbai = 0;
						counthei = 0;
					}
				}
				success(countbai, counthei);
			}
			//设置刚下的棋子效果
			function activeQizi() {
				if(maps[a][b] == 1) {
					ctx.shadowBlur = 10;
					ctx.shadowColor = "#000000";
				} else if(maps[a][b] == 2) {
					ctx.shadowBlur = 10;
					ctx.shadowColor = "#FFFFFF";
				}
			}

			//刚下棋子的坐标点
			var a;
			var b;

			canvas.onclick = function() {
				xiangxia.load();
				xiangxia.play();
				drawQipan();
				drawQizi();
				var x = parseInt(event.offsetX) - 26;
				var y = parseInt(event.offsetY) - 26;
				for(var i = 0; i < 15; i++) {
					for(var k = 0; k < 15; k++) {
						var c = Math.sqrt(Math.pow(x - 32 * k, 2) + Math.pow(y - 32 * i, 2));
						if(c < 10 && maps[i][k] == 0) {
							ctx.beginPath();
							if(isBai) {
								maps[i][k] = 1;
								ctx.fillStyle = "#FFFFFF";
								isBai = false;
							} else {
								maps[i][k] = 2;
								ctx.fillStyle = "#000000";
								isBai = true;
							}
							a = i;
							b = k;
							ctx.arc(k * 32 + 26, i * 32 + 26, 15, 0, 2 * Math.PI);
							ctx.fill();
							checkSuccess();
						}
					};
				};
			}
			canvas.onmousemove = function(e) {
				ctx.clearRect(0, 0, 500, 500);
				drawQipan();
				drawQizi();
				var x = parseInt(e.offsetX) - 26;
				var y = parseInt(e.offsetY) - 26;
				canvas.className = "notAllowed";
				for(var i = 0; i < 15; i++) {
					for(var k = 0; k < 15; k++) {
						var c = Math.sqrt(Math.pow(x - 32 * k, 2) + Math.pow(y - 32 * i, 2));
						if(c < 10 && maps[i][k] == 0) {
							canvas.className = "pointer";
							ctx.beginPath();
							if(isBai) {
								ctx.fillStyle = "#FFFFFF";
							} else {
								ctx.fillStyle = "#000000";
							}
							ctx.shadowBlur = 0;
							ctx.shadowColor = "";
							ctx.arc(x + 26, y + 26, 15, 0, 2 * Math.PI);
							ctx.fill();
							ctx.shadowBlur = 10;
							ctx.shadowColor = "white";
						}
					}
				}
			}

			//初始化棋子数组
			function init() {
				for(var i = 0; i < 15; i++) {
					maps[i] = [];
					for(var k = 0; k < 15; k++) {
						maps[i][k] = 0;
					}
				}
			}

			function drawQizi() {
				ctx.translate(26, 26);
				ctx.shadowBlur = 0;
				ctx.shadowColor = "";
				for(var i = 0; i < maps.length; i++) {
					for(var k = 0; k < maps[i].length; k++) {
						if(i == a && k == b) {
							activeQizi(a, b);
						}
						if(maps[i][k] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "#FFFFFF";
							ctx.arc(k * 32, i * 32, 15, 0, 2 * Math.PI);
							ctx.fill();
						} else if(maps[i][k] == 2) {
							ctx.beginPath();
							ctx.fillStyle = "#000000";
							ctx.arc(k * 32, i * 32, 15, 0, 2 * Math.PI);
							ctx.fill();
						}
						ctx.shadowBlur = 0;
						ctx.shadowColor = "";

					}
				}
				ctx.translate(-26, -26);
				ctx.shadowBlur = 10;
				ctx.shadowColor = "white";
			}

			function drawQipan() {
				ctx.shadowBlur = 0;
				ctx.shadowColor = "";
				ctx.fillStyle = "#ff8c00";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.strokeStyle = "#000000";
				ctx.strokeRect(10, 10, 480, 480)
				ctx.translate(26, 26);
				for(var i = 0; i < 15; i++) {
					ctx.beginPath();
					ctx.moveTo(0, i * 32);
					ctx.lineTo(448, i * 32);
					ctx.stroke();
				}
				for(var i = 0; i < 15; i++) {
					ctx.beginPath();
					ctx.moveTo(i * 32, 0);
					ctx.lineTo(i * 32, 448);
					ctx.stroke();
				}
				ctx.translate(-26, -26);
				ctx.shadowBlur = 10;
				ctx.shadowColor = "white";
			}
		</script>
	</body>

</html>